import {
  checkParamStandardIsNull,
  splitStandardUnit,
  standardCn2Unit
} from '@/utils/standard'
import {
  CommonEventFunction,
  Input,
  Picker,
  PickerSelectorProps,
  Text,
  View
} from '@tarojs/components'
import {throttle} from 'lodash'
import {useEffect, useState} from 'react'
import {InputEventDetail} from 'taro-ui/types/input'
// import { NumberKeyboard } from '@nutui/nutui-react-taro';

const StandardUnitPicker: React.FC<{
  onChange: (data: string) => void
  paramUnit?: string
  standard?: string
}> = ({onChange, standard, paramUnit}): JSX.Element => {
  // 当前参数的单位 ， 默认为undefined
  const [standardUnit, setStandardUnit] = useState<StandardUnit | undefined>(
    undefined
  )

  const [range, setRange] = useState<StandardCnUnit[]>([
    '大于等于',
    '小于等于',
    '两者之间'
  ])
  const [rangeIndex, setRangeIndex] = useState<number | undefined>(undefined)

  // 参数标准范围的数值
  const [standardValue, setStandardValue] = useState(['', ''])

  const handleValue0Input: CommonEventFunction<InputEventDetail> = throttle(
    e => {
      let value = [e.detail.value.toString(), standardValue[1]]
      setStandardValue(value)
    },
    300
  )

  const handleValue1Input: CommonEventFunction<InputEventDetail> = throttle(
    e => {
      let value = [standardValue[0], e.detail.value.toString()]
      setStandardValue(value)
    },
    300
  )

  // 更新当前参数的单位
  function updateStandardUnit(standRange?: string) {
    if (!standRange || standRange === 'N/A') {
      setStandardUnit(undefined)
      setStandardValue(['', ''])
      setRangeIndex(undefined)
      return
    } else {
      let standardunit = splitStandardUnit(standRange)
      // 当参数标准的范围与现有的标准范围单位不一致时才更新
      let standardvalue = ['', '']

      if (standRange.indexOf('-') !== -1) {
        let value = standRange.split('-')
        standardvalue =
          value.length === 2
            ? value
            : value.length === 1
            ? [value[0], '']
            : ['', '']
      } else {
        standardvalue = [standRange.replace(/[^0-9\.]/g, '')]
      }

      setStandardUnit(standardunit)
      setStandardValue(standardvalue)

      let standardunitIndex = range.findIndex(
        item => standardCn2Unit(item) === standardunit
      )

      setRangeIndex(standardunitIndex)
    }
  }

  // 监听标准单位picker变化
  const handleStandardUnitPickerChange: CommonEventFunction<
    PickerSelectorProps.ChangeEventDetail
  > = e => {
    let unit = standardCn2Unit(range[e.detail.value])
    if (unit) {
      setStandardUnit(unit)
      setRangeIndex(Number(e.detail.value))
    }
  }

  function handleUnitOrValueChange() {
    if (standardUnit === '-') {
      onChange(standardValue[0] + '-' + standardValue[1])
    } else {
      onChange(standardUnit + standardValue[0])
    }
  }

  /**监听standardUnit和standardValue变化 */
  useEffect(() => {
    handleUnitOrValueChange()
  }, [standardUnit, standardValue])

  /**监听standard变化 */
  useEffect(() => {
    updateStandardUnit(standard)
  }, [standard])

  return (
    <View className="flex items-center gap-x-20 h-42">
      <Picker
        className="w-122 h-full bg-white rounded-4"
        range={range}
        value={rangeIndex}
        onChange={handleStandardUnitPickerChange}
      >
        <view className="w-full h-42 flex items-center justify-center">
          {rangeIndex !== undefined ? range[rangeIndex] : '请选择'}
        </view>
      </Picker>

      <View className="flex-1 flex items-center gap-x-8 h-full">
        {standardUnit === '-' ? (
          <>
            <Input
              className="flex-1 h-full px-8 bg-white rounded-4"
              type="digit"
              placeholder="请输入"
              value={standardValue[0]}
              onInput={handleValue0Input}
            ></Input>
            <Text className="text-16">{`-`}</Text>
            <Input
              className="flex-1 h-full px-8 bg-white rounded-4"
              type="digit"
              placeholder="请输入"
              value={standardValue[1]}
              onInput={handleValue1Input}
            ></Input>
          </>
        ) : (
          <Input
            className="flex-1 h-full px-8 bg-white rounded-4"
            type="digit"
            placeholder="请输入"
            value={standardValue[0]}
            onInput={handleValue0Input}
          ></Input>
        )}

        {paramUnit ? (
          <Text className="text-12 text-xx_text">{paramUnit}</Text>
        ) : null}
      </View>
    </View>
  )
}
export default StandardUnitPicker
